<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <el-button v-if="$store.state.archives.flag !== 2" class="margin_left_10" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button>
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>
    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>火灾事故调查认定延期审批表</h1>
      </div>
      <p class="margin_bottom_10">申请机构名称：
        <input v-if="patternIsEdit" v-model="tableData.unit" type="text" class="custom_input">
        <span v-else class="underline">{{ tableData.unit }}</span>
      </p>

      <table border="1" cellspacing="0" cellpadding="0" class="table_content">
        <tr>
          <td rowspan="3">火灾 <br> 基本 <br> 情况</td>
          <td>火灾名称</td>
          <td colspan="4">
            <input v-if="patternIsEdit" v-model="tableData.fireName" type="text" class="custom_input">
            <span v-else>{{ tableData.fireName }}</span>
          </td>
        </tr>
        <tr>
          <td>火灾地点</td>
          <td colspan="4">
            <input v-if="patternIsEdit" v-model="tableData.fireAddress" type="text" class="custom_input">
            <span v-else>{{ tableData.fireAddress }}</span>
          </td>
        </tr>
        <tr>
          <td>发生日期</td>
          <td colspan="4">
            <input v-if="patternIsEdit" v-model="tableData.fireTime" type="date" class="custom_input">
            <span v-else>{{ tableData.fireTime }}</span>
          </td>
        </tr>
        <tr>
          <td rowspan="3">申请<br>机构<br>意见</td>
          <td>申请理由</td>
          <td colspan="4">
            <div class="padding_10" style="height:137px;text-align:left" flex="dir:top main:justify">
              <div>
                <textarea v-if="patternIsEdit" v-model="tableData.applyReason" rows="3" style="width:100%;" type="date" />
                <span v-else>{{ tableData.applyReason }}</span>
              </div>
              <div v-if="patternIsEdit" style="font-size:12px;line-height:20px">
                <!-- <el-checkbox v-model="checked">情况复杂，疑难；需延期  天。</el-checkbox> -->

              </div>
              <p flex="main:justify">
                <span>承办人：
                  <input v-if="patternIsEdit" v-model="tableData.applyUndertaker" style="width:40px" type="text" class="custom_input">
                  <span v-else>{{ tableData.applyUndertaker }}</span>
                </span>
                <span v-if="patternIsEdit" style="font-size:12px">
                  √情况复杂，疑难；需延期<input v-model="tableData.applyDelayDays" class="custom_input" style="width:20px" type="text">天。
                </span>
                <span>
                  <input v-if="patternIsEdit" v-model="tableData.applyUndertakerTime" style="width:150px" type="date" class="custom_input">
                  <span v-else>{{ tableData.applyUndertakerTime }}</span>
                </span>
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <td>业务处室 </td>
          <td colspan="4">
            <div class="padding_10" style="height:137px;text-align:left" flex="dir:top main:justify">
              <div>
                <textarea v-if="patternIsEdit" v-model="tableData.applyOfficeOpinion" rows="3" style="width:100%;" type="date" />
                <span v-else>{{ tableData.applyOfficeOpinion }}</span>
              </div>
              <p flex="main:justify">
                <span>审核人：
                  <input v-if="patternIsEdit" v-model="tableData.applyOffice" type="text" class="custom_input">
                  <span v-else>{{ tableData.applyOffice }}</span>
                </span>
                <span>
                  <input v-if="patternIsEdit" v-model="tableData.applyOfficeTime" type="date" class="custom_input">
                  <span v-else>{{ tableData.applyOfficeTime }}</span>
                </span>
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <td>领导意见 </td>
          <td colspan="4">
            <div class="padding_10" style="height:137px;text-align:left" flex="dir:top main:justify">
              <div>
                <textarea v-if="patternIsEdit" v-model="tableData.applyLeaderOpinion" rows="3" style="width:100%;" type="date" />
                <span v-else>{{ tableData.applyLeaderOpinion }}</span>
              </div>
              <p flex="main:justify">
                <span>审批人：
                  <input v-if="patternIsEdit" v-model="tableData.applyLeader" type="text" class="custom_input">
                  <span v-else>{{ tableData.applyLeader }}</span>
                </span>
                <span>
                  <input v-if="patternIsEdit" v-model="tableData.applyLeaderTime" type="date" class="custom_input">
                  <span v-else>{{ tableData.applyLeaderTime }}</span>
                </span>
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <td rowspan="3">审批<br>机构<br>意见</td>
          <td>业务处室</td>
          <td colspan="4">
            <div class="padding_10" style="height:137px;text-align:left" flex="dir:top main:justify">
              <div>
                <textarea v-if="patternIsEdit" v-model="tableData.approveOfficeOpinion" rows="3" style="width:100%;" type="date" />
                <span v-else>{{ tableData.approveOfficeOpinion }}</span>
              </div>
              <p flex="main:justify">
                <span>承办人：
                  <input v-if="patternIsEdit" v-model="tableData.approveOffice" type="text" class="custom_input">
                  <span v-else>{{ tableData.approveOffice }}</span>
                </span>
                <span>
                  <input v-if="patternIsEdit" v-model="tableData.approveOfficeTime" type="date" class="custom_input">
                  <span v-else>{{ tableData.approveOfficeTime }}</span>
                </span>
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <td>业务部门</td>
          <td colspan="4">
            <div class="padding_10" style="height:137px;text-align:left" flex="dir:top main:justify">
              <div>
                <textarea v-if="patternIsEdit" v-model="tableData.approveDeptmentOpinion" rows="3" style="width:100%;" type="date" />
                <span v-else>{{ tableData.approveDeptmentOpinion }}</span>
              </div>
              <p flex="main:justify">
                <span>审核人：
                  <input v-if="patternIsEdit" v-model="tableData.approveDeptment" type="text" class="custom_input">
                  <span v-else>{{ tableData.approveDeptment }}</span>
                </span>
                <span>
                  <input v-if="patternIsEdit" v-model="tableData.approveDeptmentTime" type="date" class="custom_input">
                  <span v-else>{{ tableData.approveDeptmentTime }}</span>
                </span>
              </p>
            </div>
          </td>
        </tr>
        <tr>
          <td>领导审批</td>
          <td colspan="4">
            <div class="padding_10" style="height:137px;text-align:left" flex="dir:top main:justify">
              <div>
                <textarea v-if="patternIsEdit" v-model="tableData.approveLeaderOpinion" rows="3" style="width:100%;" type="date" />
                <span v-else>{{ tableData.approveLeaderOpinion }}</span>
              </div>
              <p flex="main:justify">
                <span>审批人：
                  <input v-if="patternIsEdit" v-model="tableData.approveLeader" type="text" class="custom_input">
                  <span v-else>{{ tableData.approveLeader }}</span>
                </span>
                <span>
                  <input v-if="patternIsEdit" v-model="tableData.approveLeaderTime" type="date" class="custom_input">
                  <span v-else>{{ tableData.approveLeaderTime }}</span>
                </span>
              </p>
            </div>
          </td>
        </tr>
      </table>

      <p class="margin_top_20">此文书由公安机关消防机构存档</p>
    </div>
    <!-- <transition name="el-zoom-in-center">
      <div v-show="patternIsEdit" class="table_shade" />
    </transition> -->
    <shareComponent v-model="showShare" />
  </div>

</template>

<script>
import { parseTime } from '@/utils/time'
// import { requestSave, requestGetById } from '@/api/home'
import shareComponent from './share'
export default {
  components: { shareComponent },
  data() {
    return {
      showShare: false,
      patternIsEdit: false,
      loading: false,
      url: '/confirmationDelay',
      tableData: {
        'applyDelayDays': 30,
        'applyLeader': '',
        'applyLeaderOpinion': '',
        'applyLeaderTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'applyOffice': '',
        'applyOfficeOpinion': '',
        'applyOfficeTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'applyReason': '',
        'applyUndertaker': '',
        'applyUndertakerTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'approveDeptment': '',
        'approveDeptmentOpinion': '',
        'approveDeptmentTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'approveLeader': '',
        'approveLeaderOpinion': '',
        'approveLeaderTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'approveOffice': '',
        'approveOfficeOpinion': '',
        'approveOfficeTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'archivesId': 0,
        'creator': '',
        'creatorId': 0,
        'fireAddress': '',
        'fireName': '',
        'fireTime': parseTime(new Date(), '{y}-{m}-{d}'),
        'id': 0,
        'oper': 0,
        'title': '',
        'unit': ''
      }
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      formData.applyLeaderTime = `${formData.applyLeaderTime} 00:00:00`
      formData.applyOfficeTime = `${formData.applyOfficeTime} 00:00:00`
      formData.applyUndertakerTime = `${formData.applyUndertakerTime} 00:00:00`
      formData.approveDeptmentTime = `${formData.approveDeptmentTime} 00:00:00`
      formData.approveLeaderTime = `${formData.approveLeaderTime} 00:00:00`
      formData.approveOfficeTime = `${formData.approveOfficeTime} 00:00:00`
      formData.fireTime = `${formData.fireTime} 00:00:00`
      formData.title = '火灾事故延期审批表'
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        const formData = res.data
        formData.approveDate =
        formData.applyLeaderTime = parseTime(formData.applyLeaderTime, '{y}-{m}-{d}')
        formData.applyOfficeTime = parseTime(formData.applyOfficeTime, '{y}-{m}-{d}')
        formData.applyUndertakerTime = parseTime(formData.applyUndertakerTime, '{y}-{m}-{d}')
        formData.approveDeptmentTime = parseTime(formData.approveDeptmentTime, '{y}-{m}-{d}')
        formData.approveLeaderTime = parseTime(formData.approveLeaderTime, '{y}-{m}-{d}')
        formData.approveOfficeTime = parseTime(formData.approveOfficeTime, '{y}-{m}-{d}')
        formData.fireTime = parseTime(formData.fireTime, '{y}-{m}-{d}')
        this.tableData = formData
      })
    }

  }
}
</script>

